<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="drag-tag-list-box" v-loading="ajaxLoader">
        <div class="drag-tag-list-header">
            <el-tabs v-model="type" type="card" @tab-click="handleClick">
                <!-- <el-tab-pane label="按部门" name="department"></el-tab-pane> -->
                <el-tab-pane label="按分类" name="tag"></el-tab-pane>
            </el-tabs>
            <div class="search__input">
                <el-input
                    placeholder="请输入关键词搜索"
                    prefix-icon="el-icon-search"
                    v-model="search"
                    @input="handleInputChange"
                >
                </el-input>
            </div>
        </div>
        <ul class="drag-tag-list-ul">
            <ask-empty-text v-if="list.length === 0"></ask-empty-text>
            <template v-for="item in list">
                <li class="drag-tag-list-li" :key="item.id">
                    <div class="drag-tag-list__menu">
                        {{ item.name }}
                    </div>
                    <drag-list
                        :list="item.children"
                        @item-click="handleItemClick"
                    ></drag-list>
                </li>
            </template>
        </ul>
        <!-- </draggable> -->
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import DragList from "./list.vue";

// const mock = ["input", "select", "date", "location", "img"];
@Component({
    components: {
        DragList
    }
})
export default class DragTagList extends Vue {
    type = "tag";
    search = "";
    ajaxLoader = false;
    ajaxIndex = 0;
    list = [];
    // list = mock.map((cur: any, index: number) => {
    //     return {
    //         label: "我是名字" + cur,
    //         chidlren: mock.map((scur: any, sindex: number) => {
    //             return {
    //                 label: "名字" + sindex,
    //                 type: cur,
    //                 id: index + "-" + sindex,
    //                 fixed: true
    //             };
    //         }),
    //         id: index
    //     };
    // });

    mounted() {
        this.initData();
    }

    loader(state: boolean) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    handleInputChange() {
        this.initData();
    }

    async initData() {
        this.loader(true);
        try {
            const response = await this.$server["moduleManage/form/dimension"]({
                loader: false,
                data: {
                    name: this.search,
                    type: this.type === "tag" ? 1 : 0
                }
            });
            if (response.data.code !== 200) {
                throw response.data;
            }
            this.loader(false);
            const data = response.data.data || {};
            this.list = this.buildTableData(data || {});
        } catch (error) {
            if (error.cancel) {
                return;
            }
            this.loader(false);
            this.$message.error(error.message || "接口请求错误!");
            throw error;
        }
    }

    buildTableData(list: any) {
        const res: any = [];
        Object.keys(list).forEach((key: any, index: any) => {
            const _cur: any = {};
            _cur.name = key;
            _cur.id = index;
            _cur.children = (list[key] || []).map((cur: any) => {
                return {
                    id: cur.id,
                    name: cur.name || "",
                    source: cur
                };
            });
            if (_cur.children && _cur.children.length > 0) {
                res.push(_cur);
            }
        });
        return res;
    }

    handleClick() {
        this.initData();
    }

    handleItemClick(item: any, type: string) {
        this.$emit("item-click", item, type);
    }
}
</script>
